<!--poi地址——分页下拉表格-->
<template>
  <div>
    <div>
      this.tableConfig.datasource=={{tableConfig.datasource.length}}
    </div>
    <ele-table-select
      id="tableSelect"
      :hideOnSinglePage="true"
      popper-class="select-display"
      @select="selectVideo"
      @clear="selectVideo"
      ref="select"
      v-model="form.address"
      :clearable="true"
      placeholder="请输入城市和商家简称搜索可加载"
      value-key="poi_id"
      label-key="address"
      :table-config="tableConfig"
      :popper-width="popWidth"
    >
      <!-- 角色列 -->
      <template v-slot:roles="{ row }">
        <el-tag
          v-for="item in row.roles"
          :key="item.roleId"
          size="mini"
          type="primary"
          :disable-transitions="true"
        >
          {{ item.roleName }}
        </el-tag>
      </template>
      <div class="el-pagination is-background ele-pagination-circle" style="position: absolute;bottom: 0px;z-index: 9999" @click="lookMore()">查看更多</div>
    </ele-table-select></div>
</template>

<script>
  import {dyPoi} from "@/api/releaseManage/tiktok";
  export default {
    name: "connected-activities",
    props:{
      lists:Array,
      types:Number
    },
    data() {
      return {
        nextStep:0,
        // popWidth:document.body.clientWidth * 0.3 - 120,
        popWidth:0,
        form:{
          address:''
        },
        merchantName:'',
        provinceCity:'',
        // 回显值
        initValue: undefined,
        // 表格配置
        tableConfig: {
          // 传值进入
          // datasource: this.lists,
          datasource:[],
            /*({ page, limit, where, order }) => {
              console.log("page, limit, where, order",page, limit, where, order)
              // return dyPoi({ ...where, ...order, page, limit });
              return dyPoi(this.merchantName,this.provinceCity,page, limit);
            },*/
          columns: [
            {
              prop: 'address',
              label: 'poi地址',
              sortable: 'custom',
              showOverflowTooltip: true,
              align: 'center',
            }
          ],
          layout:"prev, pager, next",  //是否，展示页数，和跳转等
          toolbar: false,
          pageSize: 10,
          pageSizes: [ 5, 10, 15, 20],
          size: 'small',
          hideOnSinglePage: true  //只有一页时，是否隐藏分页
        },
      }
    },
    methods:{
      // 刷新下拉表格
      reload(where){
        console.log('刷新下拉表格======')
        this.$refs.select.reload({
          where: where,
          page: 1
        });
        console.log("tableConfig.datasource)",this.tableConfig)
        this.datasource(this.nextStep,10)
       setTimeout(()=>{
         this.$nextTick(()=>{
           this.$emit('loadClose') // 修改
           // this.$parent.loadClose()
         })
       },1000)
      },
      /* 如果想在数据源里面获取到接口返回的数据, 增加 async 和 await */
      async datasource(page, limit) {
        console.log('page, limit',page, limit)
        const result = await dyPoi(this.merchantName,this.provinceCity,page, limit);
        console.log("result.list",result)
        // let list={'list':result.data.pois};
        // let count={'count':result.data.cursor};
        if(this.nextStep==0){
          this.$set(this.tableConfig,'datasource',result.data.pois)
        }
        else{
          console.log("this.tableConfig.datasource222222222",this.tableConfig.datasource,result.data.pois)
          this.tableConfig.datasource= [...this.tableConfig.datasource,...result.data.pois]
          console.log("this.tableConfig.datasource33333333333",this.tableConfig.datasource)
        }
        this.nextStep=result.data.cursor
        // this.$set(this.tableConfig.datasource,'list',result.data.pois)
        // this.$set(this.tableConfig.datasource,'count',result.data.cursor)
        console.log("this.tableConfig.datasource",this.tableConfig.datasource)

        return result.data;  // 这里返回的数据要包含 list 和 count 两个字段，字段名称可以通过 response 属性配置
      },
      // 查看更多
      lookMore(){
        this.datasource(this.nextStep,10)
      },
      /* 表格数据源
      datasource({ page, limit, where, order }) {
        return dyCommentList({
          ...where,
          ...order,
          page,
          limit,
          id:this.commentId
        });
      },*/
      init(merchantName,provinceCity){
        this.popWidth= document.getElementById("tableSelect").offsetWidth;
        this.merchantName=merchantName
        this.provinceCity=provinceCity
        /*this.tableConfig.datasource=[]
        this.tableConfig.datasource=this.lists*/

      },
      // 选择POI地址
      selectVideo(e){
        console.log('选择POI地址',e)
        e.pageSize=this.tableConfig.pageSize
        if(e){
          this.$set( this.form, 'address' ,e.poi_id)
          // this.form.address=e.address //剪辑工程ID
        }
        // clear事件进入
        else{
          this.form.address=''  //剪辑工程ID
          // this.hint=''
        }
        this.$emit('getData', e) // 修改
      },
      clear(){
        this.form.address=null
      }
    }
  }
</script>

<style scoped lang="less">
</style>
